<template>
  <div id="finnancial">
    <el-row>
      <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
        <el-input :placeholder="type" ref="content" v-model="addInput">
              <template slot="prepend">
                <el-dropdown @command="handleCommand">
                  <el-button type="primary">
                    搜索类别<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="id">订单号</el-dropdown-item>
                    <el-dropdown-item command="payType">支付类型</el-dropdown-item>
                    <el-dropdown-item command="mainState">支付状态</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-input>
      </el-col>
      <el-col :xs="4" :sm="4" :md="5" :lg="5" :xl="4">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <!-- <el-button type="info" @click="reset">重置</el-button> -->
          <el-button type="danger" plain @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <Ftable></Ftable>
          <Page></Page>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Ftable from '../ygr/Ftable.vue'
import Page from '../../common/Page.vue'
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Cost',
  components: {
    Ftable,
    Page
  },
  data() {
    return {
      addInput: '',
      type:'id'
    }
  },
  methods: {
    ...mapActions(['expend/opList', 'expend/getLists']),
    handleCommand(command) { //切换搜索类别
      console.log(command)
      this.type=command

    },
     search() { //搜索
      if (this.addInput) { //不为空
        if (isNaN(this.addInput)&&this.type=='id') {//类型为id是数字
          this.$message({
              type: 'danger',
              message: '订单号不合法!'
            })
          return
        }
          let obj = {};
          obj[this.type] = this.addInput
          console.log(obj)
          this['expend/getLists']([url.findZDData, obj])
        
      }else{
        this.$message({
          type: 'danger',
          message: '不能为空!'
        })
      }
    },
    reset() { //重置（重新获取请求数据列表）
      this['expend/getLists']([url.getZDData])
      this.addInput = '' //清空输入框内容
      this.type = 'id' //默认根据id值检索
    }
  },
  created(){
    this['expend/getLists']([url.getZDData])
  }
}

</script>
<style lang="less" scoped>
#finnancial {
  .el-row {
    margin-top: 10px;
  }
}

</style>
